<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div>
    <div class="nameList_box" v-if="!isApp">
      <div class="tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick" v-if="isRefreshTag">
          <el-tab-pane label="初选艺人名单" name="zero">
            <div class="first_box">
              <div class="first" v-for='item, index in primaryList' @click="pushToDetail(item.uid)">
                <div class="first_img">
                  <img :src="item.cover"/>
                </div>
                <div class="first_text">
                  <div class="text_one">
                    <div class="text_one_one">
                      <span style="font-size: 20px">{{item.realName}}</span>
                      <span>{{item.sex == 1 ? '男' : '女'}}</span>
                    </div>
                  </div>
                  <p>职业：{{item.jobList}}</p>
                  <p>地址：{{item.cityList}}</p>
                  <p>标签：{{item.typeList}}</p>
                  <div class="split"></div>
                  <div class="bottom">
                    <span class="remove"></span>
                  </div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已邀请的艺人" name="first">
            <div class="first_box">
              <div class="first" v-for='item, index in inviteList' @click="pushToDetail(item.uid)">
                <div class="first_img">
                  <img :src="item.cover"/>
                </div>
                <div class="first_text">
                  <div class="text_one">
                    <div class="text_one_one">
                      <span style="font-size: 20px">{{item.realName}}</span>
                      <span>{{item.sex == 1 ? '男' : '女'}}</span>
                    </div>
                  </div>
                  <p>职业：{{item.jobList}}</p>
                  <p>地址：{{item.cityList}}</p>
                  <p>标签：{{item.typeList}}</p>
                  <div class="split"></div>
                  <div class="bottom">
                    <span class="remove"></span>
                  </div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已报名的艺人" name="second">
            <div class="first_box">
              <div class="first" v-for='item, index in applyList' @click="pushToDetail(item.uid)">
                <div class="first_img">
                  <img :src="item.cover"/>
                </div>
                <div class="first_text">
                  <div class="text_one">
                    <div class="text_one_one">
                      <span style="font-size: 20px">{{item.realName}}</span>
                      <span>{{item.sex == 1 ? '男' : '女'}}</span>
                    </div>
                  </div>
                  <p>职业：{{item.jobList}}</p>
                  <p>地址：{{item.cityList}}</p>
                  <p>标签：{{item.typeList}}</p>
                  <div class="split"></div>
                  <div class="bottom">
                    <span class="remove"></span>
                  </div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="项目确定的艺人" name="third">
            <div class="first_box">
              <div class="first" v-for='item, index in sureList' @click="pushToDetail(item.uid)">
                <div class="first_img">
                  <img :src="item.cover"/>
                </div>
                <div class="first_text">
                  <div class="text_one">
                    <div class="text_one_one">
                      <span style="font-size: 20px">{{item.realName}}</span>
                      <span>{{item.sex == 1 ? '男' : '女'}}</span>
                    </div>
                  </div>
                  <p>职业：{{item.jobList}}</p>
                  <p>地址：{{item.cityList}}</p>
                  <p>标签：{{item.typeList}}</p>
                  <p>是否参加：{{item.isJoin == 1 ? '参加' : '不参加'}}</p>
                  <div class="split"></div>
                  <div class="bottom">
                    <span class="remove"></span>
                  </div>
                </div>
                <div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-dialog title="分享" :visible.sync="shareDialogVisible" width="40%">
        <div class="dialog_look">
          <span style="width: 65%;">{{shareUrl}}</span>
          <el-button style="margin-left: 80%;" v-clipboard:copy="shareUrl" v-clipboard:success="copySuccess">复制链接
          </el-button>
        </div>
        <div slot="footer" class="dialog-footer">
          <div class="dialog_text" @click="shareDialogVisible = false">
            <span>确认</span>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="nameList_phone" v-if="isApp">
      <div class="head" @click="dialogVisible = true;">
        <div class="image">
          <img :src="projectInfo.cover"/>
        </div>

        <div class="projectContent">
          <div class="title">
            {{projectInfo.projectName}}
          </div>
          <div class="body">
            <div class="text1">简介:{{projectInfo.recruitingContent}}</div>
            <img src="../../assets/icon_right_arrow.png"/>
          </div>
        </div>
      </div>
      <div class="tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick" v-if="isRefreshTag">
          <el-tab-pane label="初选" name="zero">
            <div class="first_box">
              <div class="first" v-for='item, index in primaryList' @click="pushToDetail(item.uid)">
                <div class="first_img">
                  <img :src="item.cover"/>
                </div>
                <div class="first_text">
                  <div class="text_one">
                    <div class="text_one_one">
                      <span style="font-size: 20px">{{item.realName}}</span>
                      <span>{{item.sex == 1 ? '男' : '女'}}</span>
                    </div>
                  </div>
                  <p>职业：{{item.jobList}}</p>
                  <p>地址：{{item.cityList}}</p>
                  <p>标签：{{item.typeList}}</p>
                </div>
                <div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已邀请" name="first">
            <div class="first_box">
              <div class="first" v-for='item, index in inviteList' @click="pushToDetail(item.uid)">
                <div class="first_img">
                  <img :src="item.cover"/>
                </div>
                <div class="first_text">
                  <div class="text_one">
                    <div class="text_one_one">
                      <span style="font-size: 20px">{{item.realName}}</span>
                      <span>{{item.sex == 1 ? '男' : '女'}}</span>
                    </div>
                  </div>
                  <p>职业：{{item.jobList}}</p>
                  <p>地址：{{item.cityList}}</p>
                  <p>标签：{{item.typeList}}</p>
                </div>
                <div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已报名" name="second">
            <div class="first_box">
              <div class="first" v-for='item, index in applyList' @click="pushToDetail(item.uid)">
                <div class="first_img">
                  <img :src="item.cover"/>
                </div>
                <div class="first_text">
                  <div class="text_one">
                    <div class="text_one_one">
                      <span style="font-size: 20px">{{item.realName}}</span>
                      <span>{{item.sex == 1 ? '男' : '女'}}</span>
                    </div>
                  </div>
                  <p>职业：{{item.jobList}}</p>
                  <p>地址：{{item.cityList}}</p>
                  <p>标签：{{item.typeList}}</p>
                </div>
                <div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已确定" name="third">
            <div class="first_box">
              <div class="first" v-for='item, index in sureList' @click="pushToDetail(item.uid)">
                <div class="first_img">
                  <img :src="item.cover"/>
                </div>
                <div class="first_text">
                  <div class="text_one">
                    <div class="text_one_one">
                      <span style="font-size: 20px">{{item.realName}}</span>
                      <span>{{item.sex == 1 ? '男' : '女'}}</span>
                    </div>
                  </div>
                  <p>职业：{{item.jobList}}</p>
                  <p>地址：{{item.cityList}}</p>
                  <p>标签：{{item.typeList}}</p>
                  <p>是否参加：{{item.isJoin == 1 ? '参加' : '不参加'}}</p>
                </div>
                <div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-dialog title="项目简介" :visible.sync="dialogVisible" width="80%">
        <div class="dialog_look">
          <span>{{projectInfo.recruitingContent}}</span>
        </div>
        <div slot="footer" class="dialog-footer">
          <div class="dialog_text" @click="dialogVisible = false">
            <span>确认</span>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        shareUrl: window.location.href + '&share=1',
        activeName: "zero", //second third
        activeName0: true,
        activeName1: false,
        activeName2: false,
        activeName3: false,
        dialogVisible: false,
        primaryList: [],
        isPrimaryEdit: false,
        isInviteEdit: false,
        isApplyEdit: false,
        inviteList: [],
        applyList: [],
        sureList: [],
        projectID: '',
        isRefreshTag: true,
        mySelectActorsList: [], //已选择的艺人id数组
        actorsIdSet: new Set(),
        isApp: false,
        projectInfo: {}
      };
    },
    mounted() {
      let projectID = this.$route.query.projectID
      if (typeof projectID !== "undefined" && projectID !== null && projectID !== "") {
        this.projectID = projectID;
      }
      this.isApp = this.isMobilePhone();
      this.getProjectDetail();
      this.getPrimaryList();

    },
    methods: {
      handleClick(tab, event) {
        this.actorsIdSet.clear();
        if (this.activeName == "zero") {
          this.activeName0 = true;
          this.activeName1 = false;
          this.activeName3 = false;
          this.activeName2 = false;
          this.getPrimaryList();
        }
        if (this.activeName == "first") {
          this.activeName0 = false;
          this.activeName1 = true;
          this.activeName3 = false;
          this.activeName2 = false;
          this.getInviteList();
        }
        if (this.activeName == "second") {
          this.activeName0 = false;
          this.activeName2 = true;
          this.activeName1 = false;
          this.activeName3 = false;
          this.getApplyList();
        }
        if (this.activeName == "third") {
          this.activeName0 = false;
          this.activeName3 = true;
          this.activeName2 = false;
          this.activeName1 = false;
          this.getSureList();
        }
        console.log(tab, event);
      },

      /**
       * 获取项目详情
       */
      getProjectDetail() {
        let self = this;
        let obj = {
          projectID: this.projectID,
        };
        self.$fetch("/Category/getProjectInfo", obj).then(res => {
          if (res.code === "200") {
            self.projectInfo = res.data.projectInfo;
//            self.projectInfo.cover = 'http://img1.oss.ifensi.com/2018/1029/20181029112946222.jpg';
//            self.projectInfo.projectName = '《极限挑战》每一期的剧情设计中，导演都要保证一定不能让所有人';
//            self.projectInfo.recruitingContent = '《极限挑战》每一期的剧情设计中，导演都要保证一定不能让所有人知道这个游戏的全貌。不管男人帮成员的身份是卧底还是警察，他们都只能知道导演告知的一部分信息。';
          } else {
            self.$message.error(res.message);
          }
        });
      },
      /**
       * 获取初选列表
       *
       */
      getPrimaryList() {
        let self = this;
        let obj = {
          projectID: this.projectID,
          projectStatus: 4,
        };
        self.$fetch("/Category/getUserShareProjectSiginUp", obj).then(res => {
          if (res.code === "200") {
            self.primaryList = res.data.userList;
          } else {
            self.$message.error(res.message);
          }
        });
      },
      isMobilePhone() {
        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
          return true;
        } else {
          return false;
        }
      },
      /**
       * 获取邀请列表
       *
       */
      getInviteList() {
        let self = this;
        let obj = {
          projectID: this.projectID,
          projectStatus: 1,
        };
        self.$fetch("/Category/getUserShareProjectSiginUp", obj).then(res => {
          if (res.code === "200") {
            self.inviteList = res.data.userList;
          } else {
            self.$message.error(res.message);
          }
        });
      },
      /**
       * 获取邀请列表
       *
       */
      getApplyList() {
        let self = this;
        let obj = {
          projectID: this.projectID,
          projectStatus: 2,
        };
        self.$fetch("/Category/getUserShareProjectSiginUp", obj).then(res => {
          if (res.code === "200") {
            self.applyList = res.data.userList;
          } else {
            self.$message.error(res.message);
          }
        });
      },

      /**
       * 获取邀请列表
       *
       */
      getSureList() {
        let self = this;
        let obj = {
          projectID: this.projectID,
          projectStatus: 3,
        };
        self.$fetch("/Category/getUserShareProjectSiginUp", obj).then(res => {
          if (res.code === "200") {
            self.sureList = res.data.userList;
          } else {
            self.$message.error(res.message);
          }
        });
      },
      /**
       * 跳转到艺人详情
       *
       */
      pushToDetail(uid) {
        let routeData = this.$router.resolve({
          path: "/newArtistDetail",
          query: {uid: uid, share: 1}
        });
        window.open(routeData.href, '_blank');
      },
      copySuccess() {
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      },
    }
  };
</script>

<style lang="less" scoped>
  .dialog_look {
    word-wrap: break-word;
  }

  .tabs {
    position: relative;
    margin: 2%;
  }

  .button {
    position: absolute;
    top: 0px;
    right: 0px;
  }

  .nameList_box {
    width: 80%;
    margin: auto;
    font-size: 12px;
    margin-top: 30px;
    .first_box {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      /*justify-content: space-between;*/
      margin-top: 20px;
      .first {
        position: relative;
        margin-top: 20px;
        margin-left: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 31%;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        box-shadow: 0 3px 13px 0px rgba(0, 0, 0, 0.1);
        .first_img {
          width: 40%;
          position: relative;
          top: -10px;
          left: -10px;
          height: auto;
          img {
            top: -10px;
            left: -10px;
            height: auto;
            width: 100%;
            border-radius: 10px;
          }
        }
        .edit-img {
          position: absolute;
          width: 20px;
          left: -6px;
          top: -6px;
          height: auto;
        }
        .first_text {
          width: 60%;
          height: 100%;
          display: flex;
          flex-direction: column;
          .text_one {
            padding: 10px 15px 0px 0px;
            // width: 100%;
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: space-between;
            img {
              width: 18px;
              height: auto;
            }
            .text_one_one {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
            }
          }
          .text_two {
            padding: 10px 15px 0px 0px;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
          }
        }
        .out {
          border-top: 1px solid #f0f0f0;
          width: 100%;
          height: 36px;
          padding-right: 15px;
          text-align: right;
          line-height: 30px;
        }
        .split {
          width: 94%;
          height: 1px;
          background-color: #f2f2f2;
        }
      }
      .bottom {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        padding: 10px 20px;
        .move {

        }

        .remove {
          padding-left: 10px;
          color: #b3302e;
        }
      }
    }
  }

  .nameList_phone {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    .head {
      height: auto;
      padding: 10px;
      display: flex;
      background: #212121;
      flex-direction: row;
      align-items: center;

      justify-content: space-between;
      .image {
        width: 160px;
        height: 160px;
        text-align: center;
        font-size: 0;
      }
      .image:before {
        display: inline-block;
        content: '';
        width: 0;
        vertical-align: middle;
        height: 100%;
      }
      .image img {
        vertical-align: middle;
        max-width: 100%;
        max-height: 100%;
      }

      .projectContent {
        display: flex;
        width: 56%;
        height: auto;
        flex-direction: column;
        justify-content: center;
        color: white;
        .title {
          width: 100%;
          height: auto;
          display: -webkit-box;
          /*! autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
          -webkit-line-clamp: 2;
          overflow: hidden;
          padding-right: 10px;
          text-overflow: ellipsis;
          font-size: 24px;
        }
        .body {
          font-size: 16px;
          color: #cccccc;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          .text1 {
            width: 100%;
            height: auto;
            margin-top: 6px;
            display: -webkit-box;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            -webkit-line-clamp: 3;
            overflow: hidden;
            padding-right: 10px;
            text-overflow: ellipsis;
          }
          img {
            width: 40px;
            height: 30px;
          }
        }
      }
    }
    .first_box {
      width: calc(96%);
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      .first {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 46%;
        margin: 1.7%;
        height: auto;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        .first_img {
          img {
            width: 100%;
            border-radius: 5px 5px 0 0;
          }
        }
        .first_text {
          height: 100%;
          display: flex;
          padding: 4px;
          flex-direction: column;
          .text_one {
            padding: 10px 15px 0px 0px;
            // width: 100%;
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: space-between;
            img {
              width: 18px;
              height: auto;
            }
            .text_one_one {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
            }
          }
          .text_two {
            padding: 10px 15px 0px 0px;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
          }
        }
        .out {
          border-top: 1px solid #f0f0f0;
          width: 100%;
          height: 36px;
          padding-right: 15px;
          text-align: right;
          line-height: 30px;
        }
        .split {
          width: 94%;
          height: 1px;
          background-color: #f2f2f2;
        }
      }
    }
  }

  p {
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 1;
    overflow: hidden;
    padding-right: 10px;
    text-overflow: ellipsis;
  }

  .buttonStyle {
    padding: 0px 20px;
    background-color: #bd2f2e;
    color: white;
    height: 30px;
    border-radius: 4px;
  }

  .edit-button {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
</style>
